<template>
  <div class="menu">
    <div class="main" ref="menuEl" @click="onClickMenu">
      菜单
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Emitter } from '@/ui-kit/index';
import { MenuOptions, Msg } from '@/ui-kit/menu';
import { showPlugMgr } from '../scene/inquirer';
import { sceneAssistant } from '../scene';
import { req } from '../database/baidu-pan';
import Mousetrap from 'mousetrap';
import db from '../database';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'head-menu',
  emits: [],
  setup(props, { emit }) {
    const menuEl = ref();
    const router = useRouter();
    Mousetrap.bind('ctrl+s', async (event) => {
      // event.stopImmediatePropagation();
      // event.stopPropagation();
      event.preventDefault();
      await sceneAssistant.saveSceneImmediately();
      db.save();
      db.sync2local();
      console.log('save success');
    });
    return {
      menuEl,
      onClickMenu(event: MouseEvent) {
        const el: HTMLElement = (menuEl.value as HTMLElement);
        const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = el;
        const mouseEvent: MenuOptions = {
          x: offsetLeft,
          y: offsetTop + offsetHeight,
        };
        Emitter.emit(Msg.ShowMenu, mouseEvent, [
          {
            name: '插件管理',
            callback: () => {
              showPlugMgr();
            },
          },
          {
            name: '资源商城',
            callback: () => {
              router.push({
                name: 'mall',
              });
            },
          },
          {
            name: '百度网盘登录',
            callback: () => {
              req();
            },
          },
          {
            name: '保存',
            callback: () => {
              sceneAssistant.saveSceneImmediately();
            },
          },
        ]);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.menu {
  .main {
    width: 45px;
    height: 30px;
    user-select: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: #b4a8a8;
    }
  }
}
</style>